<nav class="m-4">
    <ul class="space-y-2 text-2xl text-gray-900 dark:text-white font-medium">
        <li class="block w-full px-3 py-2 rounded-xl ring-1 ring-inset ring-gray-300 dark:ring-gray-600 bg-gray-100 dark:bg-gray-700 hover:bg-red-400 dark:hover:bg-red-400 hover:text-white hover:font-bold dark:text-white transition-all duration-200">
            <a href="#">
                <div class="flex items-center gap-3">
                    <img src="/assets/static/img/ui/friends.svg" alt="Friends" class="w-8 h-8">
                    Friends
                </div>
            </a>
        </li>
        <li class="block w-full px-3 py-2 rounded-xl ring-1 ring-inset ring-gray-300 dark:ring-gray-600 bg-gray-100 dark:bg-gray-700 hover:bg-red-400 dark:hover:bg-red-400 hover:text-white hover:font-bold dark:text-white transition-all duration-200">
            <a href="#">
                <div class="flex items-center gap-3">
                    <img src="/assets/static/img/ui/achievements.svg" alt="Friends" class="w-8 h-8">
                    Achievements
                </div>
            </a>
        </li>
        <li class="block w-full px-3 py-2 rounded-xl ring-1 ring-inset ring-gray-300 dark:ring-gray-600 bg-gray-100 dark:bg-gray-700 hover:bg-red-400 dark:hover:bg-red-400 hover:text-white hover:font-bold dark:text-white transition-all duration-200">
            <a href="#">
                <div class="flex items-center gap-3">
                    <img src="/assets/static/img/ui/messages.svg" alt="Friends" class="w-8 h-8">
                    Messages
                </div>
            </a>
        </li>
        <li class="block w-full px-3 py-2 rounded-xl ring-1 ring-inset ring-gray-300 dark:ring-gray-600 bg-gray-100 dark:bg-gray-700 hover:bg-red-400 dark:hover:bg-red-400 hover:text-white hover:font-bold dark:text-white transition-all duration-200">
            <a href="#">
                <div class="flex items-center gap-3">
                    <img src="/assets/static/img/ui/voice_chat.svg" alt="Friends" class="w-8 h-8">
                    Voice Chat
                </div>
            </a>
        </li>
        <li class="block w-full px-3 py-2 rounded-xl ring-1 ring-inset ring-gray-300 dark:ring-gray-600 bg-gray-100 dark:bg-gray-700 hover:bg-red-400 dark:hover:bg-red-400 hover:text-white hover:font-bold dark:text-white transition-all duration-200">
            <a href="#">
                <div class="flex items-center gap-3">
                    <img src="/assets/static/img/ui/profile.svg" alt="Friends" class="w-8 h-8">
                    My Profile
                </div>
            </a>
        </li>
        <li class="block w-full px-3 py-2 rounded-xl ring-1 ring-inset ring-gray-300 dark:ring-gray-600 bg-gray-100 dark:bg-gray-700 hover:bg-red-400 dark:hover:bg-red-400 hover:text-white hover:font-bold dark:text-white transition-all duration-200">
            <a href="#">
                <div class="flex items-center gap-3">
                    <img src="/assets/static/img/ui/settings.svg" alt="Friends" class="w-8 h-8">
                    Settings
                </div>
            </a>
        </li>
    </ul>
</nav>